<template>
  <div>
    <h1>{{ num }}</h1>
    <button @click="handleNum">普通数据操作</button>
    <h1>{{ num1 }}</h1>
    <button @click="handleNum1">ref数据操作</button>
    <h1>{{ msg }}</h1>
    <h2>{{ reMsg }}</h2>
    <button @click="msg = '走你'">修改msg</button>
  </div>
</template>

<script setup>
// 所有的组合式API，都必须在setup环境内执行
// setup环境中，没有this，也没必要使用this

import { computed, onMounted, onUpdated, ref, watch } from "vue";

// 逻辑1. 普通数据，数据变化不能引发视图更新
let num = 100;
const handleNum = () => {
  num++;
  console.log(num);
};

// 逻辑2. 响应式数据，数据变化会自动引发视图更新，替代选项式中的data
let num1 = ref(123);
const handleNum1 = () => {
  //替代选项式中的methods
  num1.value += 10;
};

// 逻辑3. computed计算属性
const msg = ref("Hello");
const reMsg = computed(() => {
  //替代选项式中的computed属性
  return msg.value.split("").reverse().join("");
});

// 逻辑4. watch监听
watch(num1, () => {
  console.log("检测到了num1的变化");
});

// 逻辑5. 生命周期
// setup中无法使用beforeCreate、created
console.log("setup组合式API初始化了");
onMounted(() => {
  console.log("首屏渲染完毕");
});
onUpdated(() => {
  console.log("视图更新了");
});
</script>

<style lang="scss" scoped></style>
